<template>
    <div id="charts" class="pie-chart" />
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'

export default {
    name: 'PieChart',
    props: {
        data: {
            type: Object,
            default: () => ({ level1: [], level2: [] })
        }
    },
    watch: {
        'data.level2': {
            handler(newVal) {
                this.$nextTick(() => {
                    newVal.length > 0 && this.init()
                })
            },
            deep: true
        }
    },
    methods: {
        init() {
            const colors = ['#EB6100', '#61D291', '#62D5ED', '#FC8452']
            
            const colorMap = {}

            this.data.level1.forEach((item, index) => {
                colorMap[item.name] = colors[index % 4]
            })
            const options = {
                // 内环名称字段
                dimension: 'innerName',
                // 外环名称字段
                label: 'name',
                // 根据内环区分的不同配置颜色
                colorMap
            }

            const data = this.data.level2
            const ds = new DataSet()
            const dv = ds.createView()
            dv.source(data).transform({
                type: 'percent',
                field: 'value',
                dimension: options.dimension,
                as: 'percent',
            })

            const chart = new Chart({
                container: 'charts',
                autoFit: true
            })
            chart.data(dv.rows)
            chart.legend({
                position: 'top-left'
            })
            chart.coordinate('theta', {
                radius: 0.45,
                innerRadius: 0,
            })
            chart.tooltip({
                showMarkers: false,
                customItems: (items) => {
                    // 把提示文字处理为10（10%）格式
                    items[0].value = `${items[0].data.value}（${(Number(items[0].value) * 100).toFixed(1)}%）`
                    items[0].name = `${items[0].data.name}`
                    return items
                },
            })
            chart
                .interval()
                .adjust('stack')
                .position('percent')
                .color(options.dimension, (val) => options.colorMap[val])
                .style({
                    stroke: 'white',
                    lineWidth: 1,
                })
                .label(options.label, {
                    offset: -5,
                    style: {
                        fill: 'black',
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
                    },
                    content: (obj) => {
                        return obj[options.dimension] + '\n\t\t\t' + (obj.percent * 100).toFixed(1) + '%'
                    }
                })

            const ds2 = new DataSet()
            const dv2 = ds2.createView()
            dv2.source(data).transform({
                type: 'percent',
                field: 'value',
                dimension: 'id',
                as: 'percent',
            })
            const outterView = chart.createView()
            outterView.data(dv2.rows)
            outterView.coordinate('theta', {
                innerRadius: 0.45 / 0.9,
                radius: 0.9,
            })
            outterView
                .interval()
                .adjust('stack')
                .position('percent')
                .color(`${options.dimension}*id`, (type, name) => options.colorMap[type])
                .style({
                    stroke: 'white',
                    lineWidth: 1,
                })
                .label(options.label, {
                    offset: -10,
                    style: {
                        fill: 'white',
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
                    },
                })

            chart.interaction('element-active')

            chart.render()
        }
    }
}
</script>

<style lang="scss" scoped>
.pie-chart {
    width: 100%;
    max-width: 900px;
    height: 300px;
    margin: 1px 0 16px;
}
</style>
